<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="bold my-e0p5 fontSize-lg indent">
			checkbox
		</view>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>type</view>
				<view>String</view>
				<view>primary</view>
				<view>颜色主题</view>
			</view>
			<view class="tr">
				<view>color</view>
				<view>String</view>
				<view>无</view>
				<view>自定义主题色</view>
			</view>
			<view class="tr">
				<view>size</view>
				<view>String</view>
				<view>md</view>
				<view>预定尺寸</view>
			</view>
			<view class="tr">
				<view>plain</view>
				<view>Boolean</view>
				<view>false</view>
				<view>镂空</view>
			</view>
			<view class="tr">
				<view>inline</view>
				<view>Boolean</view>
				<view>true</view>
				<view>内联排版</view>
			</view>
			<view class="tr">
				<view>value</view>
				<view>String, Number</view>
				<view>无</view>
				<view>值，使用组时有效且必须，作为选种值提交</view>
			</view>
			<view class="tr">
				<view>checked</view>
				<view>Boolean</view>
				<view>false</view>
				<view>默认选中状态</view>
			</view>
			<view class="tr">
				<view>id</view>
				<view>String</view>
				<view>无</view>
				<view>id，不设则自动以随机数生成</view>
			</view>
			<view class="tr">
				<view>groupId</view>
				<view>String</view>
				<view>无</view>
				<view>组id，使用组时必须设置，必须唯一且与组一致</view>
			</view>
			<view class="tr">
				<view>align</view>
				<view>String</view>
				<view>left</view>
				<view>水平对齐，可选left、right、center、between、evenly</view>
			</view>
			<view class="tr">
				<view>iconReverse</view>
				<view>Boolean</view>
				<view>false</view>
				<view>选中框与标签反向</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>icon</view>
					<view>Object</view>
					<view></view>
					<view>iconfont图标数据覆盖</view>
				</view>
				<view class="appendix">
					格式：{key:"图标名"}
					<view>checked：icon-checked 选中</view>
				</view>
			</view>
			<view class="tr">
				<view>disabled</view>
				<view>Boolean</view>
				<view>false</view>
				<view>禁用</view>
			</view>
			<view class="tr">
				<view>readOnly</view>
				<view>Boolean</view>
				<view>false</view>
				<view>只读</view>
			</view>
			<view class="tr">
				<view>disabledMsg</view>
				<view>String</view>
				<view>无</view>
				<view>禁用状态下，点击提示</view>
			</view>
			<view class="tr">
				<view>readOnlyMsg</view>
				<view>String</view>
				<view>无</view>
				<view>只读状态下，点击提示</view>
			</view>
			<view class="tr">
				<view>width</view>
				<view>String</view>
				<view>无</view>
				<view>按钮模式下，按钮宽度</view>
			</view>
			<view class="tr">
				<view>height</view>
				<view>String</view>
				<view>无</view>
				<view>按钮模式下，按钮高度</view>
			</view>
			<view class="tr">
				<view>radius</view>
				<view>String</view>
				<view>无</view>
				<view>按钮模式下，按钮圆角</view>
			</view>
			<view class="tr">
				<view>@change</view>
				<view>事件</view>
				<view>	</view>
				<view>值改变事件，提交参数当前选中状态true/false</view>
			</view>
		</view>
		
		
		<view class="bold my-e0p5 fontSize-lg indent">
			checkbox-group
		</view>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>groupId</view>
				<view>String</view>
				<view>无</view>
				<view>组id，用于与子复选框匹配，必须设置且唯一</view>
			</view>
			<view class="tr">
				<view>isRadio</view>
				<view>Boolean</view>
				<view>false</view>
				<view>开启单选框组</view>
			</view>
			<view class="tr">
				<view>nowrap</view>
				<view>Boolean</view>
				<view>false</view>
				<view>是否禁止子复选框换行排列。子复选框无其他结构包裹时有效</view>
			</view>
			<view class="tr">
				<view>vertical</view>
				<view>Boolean</view>
				<view>false</view>
				<view>垂直排列。子复选框无其他结构包裹时有效</view>
			</view>
			<view class="tr">
				<view>value</view>
				<view>Array, String</view>
				<view>[]</view>
				<view>复选框组初始值，多选时为数组，单选时为字符串</view>
			</view>
			<view class="tr">
				<view>max</view>
				<view>Number</view>
				<view>0</view>
				<view>选择数量上限，大于0且为多选时有效</view>
			</view>
			<view class="tr">
				<view>buttonMode</view>
				<view>Boolean</view>
				<view>false</view>
				<view>按钮模式，复选框以按钮形式展示</view>
			</view>
			<view class="tr">
				<view>width</view>
				<view>String</view>
				<view>0</view>
				<view>按钮宽度</view>
			</view>
			<view class="tr">
				<view>height</view>
				<view>String</view>
				<view>0</view>
				<view>按钮高度</view>
			</view>
			<view class="tr">
				<view>radius</view>
				<view>String</view>
				<view>circle</view>
				<view>按钮圆角</view>
			</view>
			<view class="tr">
				<view>disabled</view>
				<view>Boolean</view>
				<view>false</view>
				<view>禁用组</view>
			</view>
			<view class="tr">
				<view>readOnly</view>
				<view>Boolean</view>
				<view>false</view>
				<view>只读组</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>text</view>
					<view>Object</view>
					<view></view>
					<view>内部文字数据覆盖</view>
				</view>
				<view class="appendix">
					格式：{key:"文字"}
					<view>tipCheckMaxError：最多允许选择${max}项　错误提示</view>
					<view>tipCheckAllError：最多允许选择${max}项，请手动勾选　错误提示</view>
				</view>
			</view>
			<view class="tr">
				<view>@change</view>
				<view>事件</view>
				<view>	</view>
				<view>复选框组值改变事件，提交参数当前选中值。多选时为数组，单选时为字符串</view>
			</view>
			<view class="tr">
				<view>@input</view>
				<view>事件</view>
				<view>	</view>
				<view>复选框组值改变事件，用于model</view>
			</view>
			<view class="tr">
				<view>selectAll</view>
				<view>function</view>
				<view>	</view>
				<view>使用refs调用，子复选框全部选中。单选时无效，子复选框数量大于限制数时无效</view>
			</view>
			<view class="tr">
				<view>clearAll</view>
				<view>function</view>
				<view>	</view>
				<view>使用refs调用，子复选框全部取消选中。单选时无效</view>
			</view>
		</view>
		
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：{{'&lt;vi-checkbox>复选框文字&lt;/vi-checkbox>'}}
			</view>
			<view class="py-sm">
				<view class="mb-sm">
					<vi-checkbox checked>第一主题色　type=primary 或不设置</vi-checkbox>
				</view>
				<view class="mb-sm">
					<vi-checkbox type="second" checked>第二主题色　type=second</vi-checkbox>
				</view>
				<view class="mb-sm">
					<vi-checkbox type="third" checked>第三主题色　type=third</vi-checkbox>
				</view>
				<view class="mb-sm">
					<vi-checkbox type="fourth" checked>第四主题色　type=fourth</vi-checkbox>
				</view>
				<view class="mb-sm">
					<vi-checkbox type="fifth" checked>第五主题色　type=fifth</vi-checkbox>
				</view>
				<view class="mb-sm">
					<vi-checkbox color="#ffc0cb" checked>自定义色　color=#ffc0cb</vi-checkbox>
				</view>
			</view>
			<view class="py-sm">
				<view class="mb-sm">
					尺寸，响应式关闭时有效果。默认1.2em
				</view>
				<view class="mb-sm">
					<vi-checkbox checked size="sm">小尺寸　size=sm</vi-checkbox>
				</view>
				<view class="mb-sm">
					<vi-checkbox checked size="md">中尺寸　size=md</vi-checkbox>
				</view>
				<view class="mb-sm">
					<vi-checkbox checked size="lg">大尺寸　size=lg</vi-checkbox>
				</view>
			</view>
			<view class="py-sm">
				<view class="mb-sm">
					<vi-checkbox checked disabled>禁用　disabled=true</vi-checkbox>
				</view>
				<view class="mb-sm">
					<vi-checkbox disabled>禁用</vi-checkbox>
				</view>
				<view class="mb-sm">
					<vi-checkbox checked readOnly>只读　readOnly=true</vi-checkbox>
				</view>
				<view class="mb-sm">
					<vi-checkbox readOnly>只读</vi-checkbox>
				</view>
				<view class="mb-sm">
					<vi-checkbox checked plain>镂空　plain=true</vi-checkbox>
				</view>
				<view class="mb-sm">
					<vi-checkbox checked plain disabled>镂空禁用</vi-checkbox>
				</view>
			</view>
			<view class="py-sm">
				按组使用：
				<view>
					{{'&lt;vi-checkbox-group groupId="xxx">'}}
					<view class="ml-e2">
						{{'&lt;vi-checkbox groupId="xxx">'}}
						<view class="ml-e2">
							复选框文字
						</view>
						{{'&lt;/vi-checkbox>'}}
					</view>
					{{'&lt;/vi-checkbox-group>'}}
				</view>
				<view class="color-error">
					注意事项：
					<view class="">
						1、复选框组、子复选框的groupId必须设置
					</view>
					<view class="">
						2、子复选框的默认选中无效，按复选框组的值设置
					</view>
					<view class="">
						3、复选框组使用type=radio开启单选
					</view>
					<view class="">
						4、子复选框如果未设置value，则不能勾选
					</view>
				</view>
			</view>
			<view class="pt-lg">
				<view class="mb-sm fbox H x-left">
					<view class="mr-e1">
						<vi-checkbox @change="selectAll1">全选</vi-checkbox>
					</view>
					<view>
					选中：{{value1}}
					</view>
				</view>
				<vi-checkbox-group ref="g1" groupId="g1" :value="value1" @change="change1">
					<vi-checkbox groupId="g1" value="a" class="mr-e1">选项1</vi-checkbox>
					<vi-checkbox groupId="g1" value="b" class="mr-e1">选项2</vi-checkbox>
					<vi-checkbox groupId="g1" value="c" class="mr-e1">选项3</vi-checkbox>
					<vi-checkbox groupId="g1" value="d" class="mr-e1">选项4</vi-checkbox>
				</vi-checkbox-group>
			</view>
			<view class="pt-lg">
				<view class="mb-sm">
					选中：{{value2}}
				</view>
				<vi-checkbox-group groupId="g2" isRadio :value="value2" @change="change2">
					<vi-checkbox groupId="g2" value="a" class="mr-e1">选项1</vi-checkbox>
					<vi-checkbox groupId="g2" value="b" class="mr-e1">选项2</vi-checkbox>
					<vi-checkbox groupId="g2" value="c" class="mr-e1">选项3</vi-checkbox>
					<vi-checkbox groupId="g2" value="d" class="mr-e1">选项4</vi-checkbox>
				</vi-checkbox-group>
			</view>
			<view class="pt-lg">
				<view class="mb-sm fbox H x-left">
					<view class="mr-e1">
						<vi-checkbox @change="selectAll3">全选</vi-checkbox>
					</view>
					<view>
					选中（限制2项）：{{value3}}
					</view>
				</view>
				<vi-checkbox-group ref="g3" groupId="g3" :value="value3" :max="2" @change="change3">
					<vi-checkbox groupId="g3" value="a" class="mr-e1">选项1</vi-checkbox>
					<vi-checkbox groupId="g3" value="b" class="mr-e1">选项2</vi-checkbox>
					<vi-checkbox groupId="g3" value="c" class="mr-e1">选项3</vi-checkbox>
					<vi-checkbox groupId="g3" value="d" class="mr-e1">选项4</vi-checkbox>
				</vi-checkbox-group>
			</view>
			<view class="pt-lg">
				<view class="py-sm">按钮模式</view>
				<vi-checkbox-group ref="g4" groupId="g4" :value="value4" buttonMode width="6em" @change="change4">
					<vi-checkbox groupId="g4" value="a">选项1</vi-checkbox>
					<vi-checkbox groupId="g4" value="b">选项2</vi-checkbox>
					<vi-checkbox groupId="g4" value="c">选项3</vi-checkbox>
					<vi-checkbox groupId="g4" value="d">选项4</vi-checkbox>
				</vi-checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1:["c"],
				value2:"d",
				value3:[],
				value4:[],
			}
		},
		methods: {
			change1(e){
				this.value1 = e
			},
			change2(e){
				this.value2 = e
			},
			change3(e){
				this.value3 = e
			},
			change4(e){
				this.value4 = e
			},
			selectAll1(e){
				if(e){
					this.$refs.g1.selectAll()
				}else{
					this.$refs.g1.clearAll()
				}
			},
			selectAll3(e){
				if(e){
					this.$refs.g3.selectAll()
				}else{
					this.$refs.g3.clearAll()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
